<template>
    <div class="experience-page">
        <div class="header">跨境营销产品价格体验</div>
        <Divider/>
        <Row>
            <Col span="12">
                <Form inline>
                    请输入中拍网网址（www.a123.com.cn）<br/>
                    <FormItem>
                        <Input v-model="value" placeholder="请输入中拍网网址" class="input" @on-enter="Intermediate"/>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="Intermediate" size="small">登录 中拍网</Button>
                    </FormItem>
                </Form>
                <div class="img" v-show="show">
                    <img :src="siteList[0].url" width="100%">
                </div>
            </Col>
            <Col span="12">
                <Form inline>
                    请输入卓越网网址（www.joyo.com）<br/>
                    <FormItem>
                        <Input v-model="value1" placeholder="请输入卓越网网址" class="input" @on-enter="excellent"/>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="excellent" size="small">登录 卓越网</Button>
                    </FormItem>
                </Form>
                <div class="img" v-show="show2">
                    <img :src="siteList[1].url" width="100%">
                </div>
            </Col>
        </Row>
        <div>
            请输入你了解到的价格策略以供考评：
            <Button type="primary" @click="search" size="small">提交</Button>
            <div>
                <Input v-model="evaluate" :autosize="{minRows: 2,maxRows: 5}" show-word-limit type="textarea"
                       placeholder="" class="inputti"/>
            </div>
        </div>

    </div>
</template>

<script>
import { saveStudentConten } from '@/api/school'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      value: '',
      value1: '',
      evaluate: '',
      img: '',
      siteList: [
        {
          name: '中拍网',
          url: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/school/%E4%B8%AD%E6%8B%8D%E5%B9%B3%E5%8F%B0.png'
        },
        { name: '卓越网', url: 'https://skv4.oss-cn-hangzhou.aliyuncs.com/school/%E5%8D%93%E8%B6%8A%E7%BD%91.png' }
      ],
      src: '',
      show: false,
      show2: false
    }
  },
  mounted () {
    this.setHelpId(7)
  },
  methods: {
    ...mapActions([
      'setHelpId'
    ]),
    Intermediate () {
      if (this.value === 'www.a123.com.cn') {
        this.show = true
      } else {
        this.$Message.error({
          content: '请输入正确网址'
        })
      }
    },
    excellent () {
      if (this.value1 === 'www.joyo.com') {
        this.show2 = true
      } else {
        this.$Message.error({
          content: '请输入正确网址'
        })
      }
    },
    search () {
      if (this.evaluate === '') {
        this.$Message.error('请输入你了解到的价格策略！')
        return false
      }
      let data = { type: '1', content: this.evaluate }
      saveStudentConten(data).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$router.push({
            name: 'schoolSelectSite'
          })
        } else {
          this.$Message.error({
            content: '保存失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    success () {
      this.$Message.success('保存成功')
    }
  }
}
</script>

<style scoped>
    /*.experience-page{*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    align-items: center;*/
    /*}*/
    .header {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
    }

    .input {
        width: 300px;
    }

    .inputti {
        width: 400px;
        margin-top: 10px;
    }

    .img {
        width: 550px;
        margin-bottom: 20px;
    }

</style>
